<template>
  <div class="loginWrap">
    <div class="ycl-box">
      <div class="ycl-box1">
          <div style="height:120px;"></div>
          <div class="logoImgBox">
            <a href="/index/indexLogin.do" class="logobox">
              <img src="~img/ymtCenter_IMG_03.png" alt="logo"/>
            </a>
          </div>
          <div style="height:38px;"></div>
          <el-form :model="formLogin" ref="formLogin" :rules="loginRules">
            <el-form-item prop="username">
              <el-input v-model="formLogin.username" placeholder="手机号码/邮箱"  autocomplete="off" maxlength="50"></el-input>
            </el-form-item>
            <el-form-item name="thepwdBox" prop="pwd">
              <el-input type="password" v-model="formLogin.pwd" placeholder="密码"  autocomplete="off" maxlength="16"></el-input>
            </el-form-item>
            <el-form-item name="loginSubmitBox">
              <el-button type="primary" @click="loginForm()">立即登录</el-button>
            </el-form-item>
          </el-form>
          <div class="forgotPwd">
            <span @click="toResetPwd">忘记密码</span>
          </div>
          <div style="height:100px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    //  验证手机号码是否正确
    function checkCellMobile (str) {
      var re = /^1\d{10}$/
      if (re.test(str)) {
        return true
      } else {
        return false
      }
    }
    //  验证输入邮箱是否正确
    function checkEmail (str) {
      var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
      if (re.test(str)) {
        return true
      } else {
        return false
      }
    }
    var checkNewAccount = (rule, value, callback) => {
      if (value) {
        if (value.indexOf('@') !== -1) {
          if (checkEmail(value)) {
            callback()
          } else {
            callback(new Error('请输入正确邮箱'))
          }
        } else {
          if (checkCellMobile(value)) {
            callback()
          } else {
            callback(new Error('请输入正确手机号码'))
          }
        }
      } else {
        callback(new Error('请输入账号'))
      }
    }
    var checkPwd = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'))
      } else {
        if (value.length < 6) {
          return callback(new Error('密码长度6-16个字符，请重新输入'))
        } else {
          callback()
        }
      }
    }
    return {
      formLogin: {
        username: '',
        pwd: ''
      },
      loginRules: {
        username: [
          { validator: checkNewAccount, trigger: 'blur' }
        ],
        pwd: [
          { validator: checkPwd, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    toResetPwd () {
      this.$router.push('/resetpwd')
    }
  }
}
</script>
<style lang="stylus">
.ycl-box .el-input__inner{
  border: 1px solid #cccccc;
}
</style>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.forgotPwd
  line-height 20px
  margin-top 24px
  text-align center
  span
    cursor pointer
    color $baseColor
    font-size 14px
.loginWrap
  width 100%
  height 100%
  background #f4f4f4
  position absolute
  top 0
  left 0
  right 0
  bottom 0
.ycl-box
  min-height 1px
  width 1180px
  margin 50px auto
  background-color #FFFFFF
  padding 0 55px
  .el-form-item
    margin-bottom 20px
  .ycl-box1
    min-height 1px
    margin 0 auto
    width 340px
    position relative
    .logoImgBox
      height 50px
      line-height 50px
      font-size 24px
      color #333
      font-weight 600
      text-align center
      .logobox
        img
          width 190px
    .el-form-item[name="thepwdBox"]
      margin-bottom 34px
    .el-form-item[name="loginSubmitBox"]
      .el-button
        width 340px
        height 48px
        line-height 48px
        font-size 14px
        text-align center
        color #FFFFFF
        border-radius 4px
        background-color $baseColor
        border 0
        outline none
        cursor pointer
        box-sizing border-box
        padding 0
</style>
